<template>
	<view class="serViceile">
		<!-- 封面图片 -->
		<fileImage :src="equipmentDetail.coverUrl" :className="['cidental']" />
		<view class="content_text">
			<view>
				<!-- 备注 -->
				{{equipmentDetail.remark || '暂无数据'}}
			</view>
		</view>
		<view>
			<view class="list_title" @click="more">
				<text>成功案例</text>
				<text>更多…</text>
			</view>
			<view style="margin-top: 18rpx;">
				<view class="prj_box" v-for="(item,index) in projectStories" @click="jumpSucceedCase(item)">
					<view class="prjlist_base">
						<view class="prjbase_left">
							<fileImage :src="item.coverPicUrl" :className="['casePhotos']" />
						</view>
						<view class="prjbase_right">
							<view>
								<!-- 项目名称 -->
								<text class="prjname">{{item.prjName}}</text>
								<image src="http://106.14.56.171:15016/images/u3063.png" mode="scaleToFill"></image>
							</view>
							<view>
								<text class="prjbase_right_text">业主方</text>
								<text class="neirong">{{item.serviceOwner}}</text>
							</view>
							<view class="firm">
								<text class="prjbase_right_text">服务方</text>
								<text class="neirong">{{item.serviceSeller_Zn}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import fileImage from '@/components/fileImage/fileImage.vue'
	export default {
		components: {
			fileImage
		},
		data() {
			return {
				// 获取设备维修服务类型
				equipmentDetail: {}, //设备内容
				projectStories: {}, //项目案例res赋值
				coverUrl: '', //备注
				remark: '', //封面图片
				tabname: '', //名称
				industryCode: '' //工业服务标识
			};
		},
		onLoad: function(options) {
			// console.log('cehn', options);
			this.industryCode = JSON.parse(options.item)
			// console.log('this.serviceCode',this.industryCode.serviceCode);
			// uni.setNavigationBarTitle 必须要加，可以改动title
			uni.setNavigationBarTitle({
				title:options.name
			})
			this.equipmentDetail = JSON.parse(options.item);
			this.proCase(); //获取项目案例
		},

		methods: {
			// 获取项目案例
			proCase() {
				var data = {
					serviceCode: this.equipmentDetail.serviceCode //serviceCode项目案例ID
				}
				this.$http.get('api/Project/GetProjectByServiceCode', data).then(res => {
					// console.log('获取项目案例',res);
					this.projectStories = res;
					this.projectStories.forEach(el => {
						// console.log(el);
					})
				})
			},
			// 跳转到项目详情里面
			jumpSucceedCase(item) {
				uni.navigateTo({
					url: '../../project/project_detail/project_detail?id=' + item.prjInfoId
				})
			},
			// 点击"更多……"跳转到项目首页并带入条件
			more() {
				let code = this.industryCode.serviceCode
				uni.navigateTo({
					url: '../../project/project_copy?code=' + code + '&types=0'
				})
			}
		}
	};
</script>

<style lang="less">
	.serViceile {
		padding-bottom: 40rpx;
	}

	.content_text {
		width: 96%;
		margin: auto;
		border-radius: 7rpx;
		background-color: #fff;
		margin-top: 10rpx;

		view {
			width: 92%;
			margin: auto;
			word-wrap: break-word;
			text-indent: 1.5em;
			padding: 20rpx 0 20rpx 0;
			font-size: 16px;
			// background-color: aqua;
		}

	}

	.list_title {
		width: 96%;
		margin: auto;
		margin-top: 30rpx;
		// background-color: aqua;
		display: flex;
		align-items: center;
		justify-content: space-between;

		>text:nth-child(1) {
			margin-left: 40rpx;
			font-size: 16px;
			font-weight: 800;
		}

		>text:nth-child(2) {
			color: #333;
			font-size: 24rpx;
			margin-right: 40rpx;
		}

	}

	.prj_box {
		width: 96%;
		margin-top: 15rpx;
		margin-left: 2%;
		background-color: #fff;
		border-radius: 7rpx;
		padding-bottom: 10rpx;
	}

	.prjlist_base {
		padding-top: 20rpx;
		display: flex;
		flex-direction: row;
	}

	.prjbase_left {
		width: 20%;
		margin-left: 4%;
	}

	.prjbase_left image {
		width: 116rpx;
		height: 116rpx;
	}

	.prjbase_right {
		width: 80%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		>view:nth-child(1) {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

	}

	.prjbase_right image {
		margin-right: 5%;
		float: right;
		width: 10rpx;
		height: 20rpx;
	}

	.base_right view {
		height: 35rpx;
		margin-top: 5rpx;
		width: 100%;
	}

	.prjbase_right_text {
		font-size: 26rpx;
		color: #999999;
		margin-right: 2%;
	}

	.neirong {
		font-size: 26rpx;
		color: #333333;
	}

	// 文本超出显示省略号
	.firm {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		// background-color: aqua;
	}

	.prjname {
		font-size: 14px;
		font-weight: 700;
	}
</style>
<style lang="scss">
	.cidental {
		width: 100%;
		height: 500rpx;
	}

	.casePhotos {
		width: 116rpx;
		height: 116rpx;
		border-radius: 7rpx;
	}
</style>
